<template>
  <!--搜索-->
  <section>
    <div>
      <van-nav-bar title="身份卡" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="code_bgc">
      <router-link to="/map" class="wrap">
        <div class="locations">当前位置：{{ address }}</div>
        <p></p>
        <div id="container"></div>
      </router-link>
      <div class="querycode" :style="bg">
        <p>
          <span class="name_top">姓名</span>
        </p>
        <div class="name">{{ idname || "姓名" }}</div>
        <span class="IDCode">证件号码</span>
        <div class="IDcode">{{ Card || "身份证号" }}</div>
        <div class="img_logo">
          <span>
            <img src="./images/logo-1.png" alt="" style="width: 8%" />
          </span>
          <span class="shengfen">我的身份卡</span>
        </div>
      </div>
    </div>
    <div class="code_b">
      <el-button>
        <span class="update">更新于：{{ dateFormat(newDate) }}</span>
      </el-button>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </div>
  </section>
</template>
<script>
import QRCode from "qrcodejs2";
import BMap from "BMap";
import { mapState } from "vuex";
export default {
  data() {
    return {
      newDate: new Date(),
      address: "",
      textIcon: require("./images/close.png"), //隐藏图标
      pwdIcon: require("./images/open.png"), //展示图标
      bg: {
        backgroundImage: "url(" + require("./images/ID.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
    };
  },
  created() {
    this.idname = localStorage.getItem("Idname");
    this.Card = localStorage.getItem("IdCard");
  },

  methods: {
    creatQrCode() {
      new QRCode(this.$refs.qrCodeUrl, {
        text: "空巢老人", // 需要转换为二维码的内容
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    dateFormat() {
      var date = new Date();
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接 时间格式处理
      return (
        year +
        "年" +
        month +
        "月" +
        day +
        "日 " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    createMap() {
      var that = this;
      var map = new BMap.Map("container");
      var point = new BMap.Point(116.331398, 39.897445);
      map.centerAndZoom(point, 12);
      var geoc = new BMap.Geocoder();
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            // console.log("您的位置：" + r.point.lng + "," + r.point.lat);

            var pt = r.point;
            geoc.getLocation(pt, function (rs) {
              var addComp = rs.addressComponents;
              that.address =
                addComp.province +
                addComp.city +
                addComp.district +
                addComp.street +
                addComp.streetNumber;
            });
          } else {
            console.log("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
    onClickLeft() {
      this.$router.replace("/profile");
    },
  },
  computed: {
    ...mapState(["userShi"]),
  },
  mounted() {
    let that = this;
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString();
    }, 3600000);
    this.creatQrCode();
    this.createMap();
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
};
</script>
<style>
.querycode {
  position: relative;
  top: 40%;
  width: 92%;
  height: 150px;
  margin: 0 auto;
  border-radius: 10px;
}
.locations {
  width: 176px;
}
.qrcodeNone {
  display: none;
}
.code_bgc {
  position: relative;
  width: 100%;
  height: 140px;
  background-color: blue;
}
.img_logo {
  position: absolute;
  top: 5px;
}
.name {
  position: absolute;
  top: 37%;
  right: 5%;
  width: 90%;
  outline: none;
  font-size: 14px;
  background-color: transparent;
}
.name_top {
  position: absolute;
  top: 25%;
  left: 5%;
  font-size: 14px;
  color: #bed5ff;
}
.IDCode {
  position: absolute;
  top: 60%;
  left: 5%;
  font-size: 14px;
  color: #bed5ff;
}
.IDcode {
  position: absolute;
  top: 74%;
  right: 5%;
  width: 90%;
  font-size: 14px;
  outline: none;
  background-color: transparent;
}
.code_b {
  position: relative;
  width: 92%;
  top: 100px;
  border-radius: 15px;
  margin: 0px 4%;
  height: 300px;
  background-color: #fff;
}
.icon-xiaoyanjing-bi::before,
.icon-xiaoyanjing-zheng::before {
  position: absolute;
  top: 0;
  left: 100px;
}

.code_b > .el-button {
  position: relative;
  z-index: 999;
  padding: 0;
  background: transparent;
  border: 0 solid #fff;
}
.shengfen {
  font-weight: 700;
  font-size: 15px;
  margin: 5px;
  color: #fff;
}
.wrap {
  width: 96%;
  float: left;
  position: relative;
  top: 25px;
  margin-left: 4%;
  height: 16px;
  color: black;
  overflow: hidden;
}
.qrcode {
  margin: 5px 13%;
}
.update {
  position: absolute;
  top: -15px;
  left: 20px;
}
</style>
